<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <Category></Category>
    </el-col>
    <el-col :span="18">
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;"
      >
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id"></el-table-column>
        <el-table-column prop="attrGroupName" header-align="center" align="center" label="组名"></el-table-column>
        <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
        <el-table-column prop="descript" header-align="center" align="center" label="描述"></el-table-column>
        <el-table-column prop="icon" header-align="center" align="center" label="组图标"></el-table-column>
        <el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id"></el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.attrGroupId)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import Category from "../common/category";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { Category },
  props: {},
  data() {
    // 这里存放数据
    return {};
  },
  // 计算属性，类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  methods: {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {}
};
</script>
<style scoped>
</style>